<style lang="less">
  @import './answer.less';
</style>
<template>
  <div class="answer-flex" id="answer">
		<header class="answer-header">
			<div class="answer-progress">
				<div class="answer-progress-bar" :style="{width: currentIndex/data.tests.length * 100 + '%'}">

				</div>
			</div>
			{{currentIndex}}/{{data.tests.length}}
			<div class="answer-time">
				<!-- <img src="../../images/stop.png"/> -->
				{{time}}
			</div>
		</header>
			<article class="answer-article" v-if="data.tests.length > 0" style="min-height: 253px;">
				<span>
					<img src="../../images/what.png"/>
					[{{data.tests[currentIndex-1].questype}}]
				</span>
				<hr />
				<ol v-if="currentIndex < data.tests.length + 1">
					<li>
						{{currentIndex}}
						<p class="answer-question">
							{{data.tests[currentIndex-1].questitle}}
						</p>
					</li>
          <!-- 选项一 -->
					<li>
            <div class="" style="padding-left: 15px;">
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '多选题' ? 'checkbox' : 'radio'"
              name='quessel1' value="A" id="one-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="one-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel1}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li>
            <div class="" style="padding-left: 15px;">
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '多选题' ? 'checkbox' : 'radio'"
              name='quessel2' value="B" id="two-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="two-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel2}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li  v-show="data.tests[currentIndex-1].quessel3">
            <div class="" style="padding-left: 15px;">
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='quessel3' value="C" id="three-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="three-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel3}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel4">
            <div class="" style="padding-left: 15px;" >
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='quessel4' value="D" id="four-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="four-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel4}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel5">
            <div class="" style="padding-left: 15px;" >
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='quessel5' value="E" id="five-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="five-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel5}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel6">
            <div class="" style="padding-left: 15px;" >
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='quessel6' value="F" id="six-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="six-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel6}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel7">
            <div class="" style="padding-left: 15px;" >
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='baoxou' value="G" id="seven-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="seven-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel7}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel8">
            <div class="" style="padding-left: 15px;" >
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='baoxou' value="H" id="eight-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="eight-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel8}}</label>
            </div>
					</li>
          <!-- 选项一 -->
          <li v-show="data.tests[currentIndex-1].quessel9">
            <div class="" style="padding-left: 15px;">
              <input :class="[data.tests[currentIndex-1].questype.trim() === '多选题' ? 'magic-checkbox' : 'magic-radio']"
              :type="data.tests[currentIndex-1].questype.trim() === '单选题' ? 'radio' : 'checkbox'"
              name='baoxou' value="G" id="nine-radio"  v-model="data.tests[currentIndex-1].stuquesans">
              <label for="nine-radio" style="line-height: 2em;">{{data.tests[currentIndex-1].quessel9}}</label>
            </div>
					</li>
				</ol>
        <div class="" v-if="data.testmodelid">
          <Button type="text" @click="data.tests[currentIndex-1].showAnswer = true"style="font-size:20px">显示正确答案</Button>
          <span style="display: inline-block;" v-show="data.tests[currentIndex-1].showAnswer">{{data.tests[currentIndex-1].quesans}}</span>
        </div>
			</article>
			<footer class="">
        <div class="answer-btns">
					<button class="answer-btn" @click="beforFinish()">提前交卷</button>
					<button class="answer-btn" @click="nextQus()" v-show="currentIndex < data.tests.length">下一题</button>
				</div>
        <div class="answer-footer">
          <button  v-for="(q, index) in data.tests.length"
          :class="{active: index === currentIndex - 1,
            noanswer: currentIndex > index + 1 && data.tests[index].stuquesans.length === 0}"
          @click="selected(index)">{{index + 1}}</button>
        </div>

			</footer>
      <Spin size="large" fix v-if="loading"></Spin>
		</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'answer',
  data () {
    return {
      questions: 100,
      currentIndex: 1,
      timer: null,
      loading: false,
      time: '60:00',
      data: {
        tests: []
      },
    };
  },
  mounted () {
    // 记录开始答题时间
    this.data.modelstartdate = this.$formatDateTime()
  },
  methods: {
    // 下一题
    nextQus () {
      // 进度加1，下一题准备
      this.currentIndex += 1;
    },
    // 选中某一个题目，注意选中的为真是下标，需要加1
    selected (index) {
      this.currentIndex = index + 1;
    },
    // 提前交卷
    beforFinish () {
      this.$Modal.confirm({
        title: '交卷提醒',
        content: '提前交卷前，请先仔细检查！',
        onOk: () => {
          this.comfirm()
        },
        onCancel: () => {
          console.log('取消提前交卷');
        }
      });
    },
    // 交卷
    comfirm () {
      this.loading = true
      this.$lsdelete('studata')
      let answer = []
      this.data.tests.forEach(item => {
        // console.log("学生答案"+this.answet2string(item.questype.trim(), item.stuquesans));
        answer.push({questionid:item.id,questionnum: item.questionnum, quesans: item.quesans, questionscore: item.questionscore,
          stuquesans: this.answet2string(item.questype.trim(), item.stuquesans)})
      })
      let obj = {
        emal: this.data.emal,
        examnum: this.data.examnum,
        idnumber: this.data.idnumber,
        userid: this.data.userid,
        username: this.data.username,
        userphone: this.data.userphone,
        testid: this.data.testid,
        answertimelong: this.getAnswerTime(), // 答题时长
        tests: answer
      }
      // 有testmodelid模拟考试
      if (this.data.testmodelid) {
        obj.modelstartdate = this.data.modelstartdate
        obj.testid = this.data.testmodelid
        obj.modelenddate = this.$formatDateTime()
        obj.modelstatus = '1'
        obj.modelflag = '1'
        obj.modeltestid = this.data.modeltestid
        obj.answertimelong = this.getAnswerTime()
        axios.post('rs/logic/modelcalculfraction', {data: obj}).then(res => {
          if (res.data.code === 200) {
            this.data.result = res.data
            this.$router.replace({
              name: 'score',
              params: this.data
            });
            this.$lsdelete('studata')
          }
        }).catch((error) => {
          this.$Message.error('提交失败,失败原因' + JSON.stringify(error));
        }).finally(() => {
          this.loading = false
        })
      } else { // 正式考试
        axios.post('rs/logic/calculfraction', {data: obj}).then(res => {
          if (res.data.code === 200) {
            this.data.result = res.data
            this.$router.replace({
              name: 'score',
              params: this.data
            });
            this.$lsdelete('studata')
          }
        }).catch((error) => {
          this.$Message.error('提交失败,失败原因' + JSON.stringify(error));
        }).finally(() => {
          this.loading = false
        })
      }


    },
    getAnswerTime () {
      let min = parseInt(this.time.split(':')[0])
      let s = parseInt(this.time.split(':')[1])
      if (s > 0) {
        return `${parseInt(this.data.usertest.testtimelong) - min - 1}分${60-s}秒`
      }
      return `${parseInt(this.data.usertest.testtimelong) - min}分0秒`
    },
    answet2string (type, sq) {
      if (type === '单选题') {
        if (sq.length > 0) {
          return sq
        } else {
          return ''
        }
      } else if (type === '多选题') {
        if (sq.length > 0) {
          return sq.sort().toString()
        } else {
          return ''
        }
      } else if (type === '判断题') {
        if (sq === 'A') {
          return '正确'
        }
        else if (sq === 'B') {
          return '错误'
        }
        else {
          return ''
        }
      }
    },
    CountDown (maxtime) {
      let time = maxtime;
      this.timer = setInterval(() => {
        if (time >= 0) {
          let minutes = Math.floor(time / 60);
          let seconds = Math.floor(time % 60);
          if (minutes === 15 && seconds === 0) {
            this.$Modal.info({content: '最后15分钟'})
          }
          // let msg = '距离结束还有' + minutes + '分' + seconds + '秒';
          // if (maxtime === 5 * 60)alert('还剩5分钟');
          this.time = `${minutes < 10 ? 0 : ''}${minutes}:${seconds < 10 ? 0 : ''}${seconds}`;
          --time;
        } else {
          clearInterval(this.this);
          this.comfirm()
        }
      }, 1000);
    },
    setTest(data) {
      // debugger
      this.data = Object.assign({}, data)
      this.data.tests.forEach(item => {
        item.showAnswer = false
        if (item.questype.trim() === '多选题') {
          item.stuquesans = []
        } else {
          item.stuquesans = ''
        }
      })
      this.timer = setInterval(this.CountDown(parseInt(this.data.usertest.testtimelong) * 60), 1000);
      // this.timer = setInterval(this.CountDown(16 * 60), 1000);
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // debugger
      let getData = vm.$lsget('studata')
      if (getData && getData.tests && getData.tests.length > 0) {
        vm.data = getData
      } else {
        vm.setTest(to.params)
      }

    })
  },
  watch: {
    'data': {
      handler: function (val, oldVal) {
        this.$lsput('studata', val)
      },
      deep: true
    }
  },
  beforeDestroy () {
    clearInterval(this.this);
    this.$lsdelete('studata')
  }
};
</script>

<style lang="css">
</style>
